/**
 * Carets
 * 需要调整尺寸的时候只需要设置font-size即可等比缩放
 * 主控参数默认值 font-size: $U20;
 * $strokeSize，笔触大小，也就是图标的线宽
 */

.iconoo-caretRight {
    width: 0.5em;
    height: 1em;
    margin: 0.25em 0.5em;
    &:before, &:after {
        width: 0.707em;         //width effects icon size, base on icon's font-size
        height: $strokeSize;    //height effects line width
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto 0;
        right: 0;
        box-shadow: inset 0 0 0 1em;
        transform-origin: right;
    }
    &:before {
        transform: rotate(45deg);
    }
    &:after {
        transform: rotate(-45deg);
    }
}

.iconoo-caretRightCircle, .iconoo-caretRightSquare {
    @extend .iconoo-caretRight;
}

.iconoo-caretLeft {
    @extend .iconoo-caretRight;
    transform: rotate(180deg);
}

.iconoo-caretLeftCircle, .iconoo-caretLeftSquare {
    @extend .iconoo-caretLeft;
}

.iconoo-caretUp {
    @extend .iconoo-caretRight;
    transform: rotate(-90deg);
}

.iconoo-caretUpCircle, .iconoo-caretUpSquare {
    @extend .iconoo-caretUp;
}

.iconoo-caretDown {
    @extend .iconoo-caretRight;
    transform: rotate(90deg);
}

.iconoo-caretDownCircle, .iconoo-caretDownSquare {
    @extend .iconoo-caretDown;
}

[class*="iconoo-caret"] {
    &[class*="Circle"], &[class*="Square"] {
        &:before, &:after {
            width: 0.55em;  //width effects icon size, base on icon's font-size
            right: 0.5em;   //居中
        }
    }
}